楽天での壁紙について

初心者のためのＨＰの飾りつけ教室VOL.8

■【ＨＰの飾りつけ教室VOL.8】上手な壁紙の使い方！

★ 壁紙でＨＰをセンスアップしよう！ ★

壁紙の色や柄で、ホームページから受ける印象は違ってきます。
同じ風景の写真でも、壁紙を暗くするか、明るくするかで写真のイメージが変わってしまいます。
壁紙は、ホームページのイメージの方向性（かわいい、クール、シンプル、など）
を決めるといえます。
見る人にどのようなイメージを持って貰いたいか、どのようなイメージなら
自分のホームページの内容に合っているか考えて壁紙は選らんだ方がいいですね。

楽天では、１枚の壁紙しか選ぶ事が出来ません。
なぜかといいますと、各ページの編集をする、テキストページに＜BODY＞のタグがないからです。

みなさんのホームページに限らず、すべてのブラウザの画面は、ＨＴＭＬのタグで成り立っております。
ソースを簡単に書きますと↓こういうものです。

　メモ帖

　ファイル　編集　表示　お気に入り　ツール　ヘルプ

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

ここに、文を書きますと、表示されます。
画像などは、HTMLタグで書きますと表示されます。
つまり、＜BODY＞から＜/BODY＞の間に書いたものが、
ブラウザに表示されるのです。

</BODY>
</HTML>

各ブラウザで壁紙や背景色を指定するには、普通は、＜BODY＞のタグの中に
BACKGROUND="～背景画像のＵＲＬ～"　それとも　BGCOLOR="指定したい色"を
入れれば、いいのです。このように↓

　メモ帖

　ファイル　編集　表示　お気に入り　ツール　ヘルプ

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BACKGROUND="～背景画像のＵＲＬ～">

＜BODY＞タグの中で、そのページの属性を指定できるのです。
例えば、文字のフォントや背景、など

</BODY>
</HTML>

しかし、楽天のテキスト編集ページには、この＜BODY＞＜/BODY＞タグがないですね。
ですから、各ページの壁紙や色を指定できないのです。

楽天で、私たちが編集しているのは、この＜BODY＞から＜/BODY＞タグの中だけを
編集しているのです。

では、どうすれば、各ページの壁紙を指定できるか？それをやってみましょう。

【更新2004/10/11　お詫び！】
2003/10/23 のタグ規制でここから下のタグは使えなくなりました。
onload=body.style.　というタグが使えません。
ですから、ＢＯＤＹ　内に命令が出せなくなりました。
楽天では使えませんが、参考のために残して起きます。
ご承知おき下さい。

＜onload=body.style.＞というタグがあります。
＜onload＞　はブラウザを開いた時に、命令を実行しますよ、というタグです。
＜style＞　これは、色々な命令を出すタグです。この＜style＞を使えば、
＜body＞内に、属性を指定できます。
ではそのタグを書いて見ます。

width="0" height="0"のように、背景画像の幅、高さ、が　「０（ゼロ）」に指定してありますが、
心配ありません。
直接、＜BODY＞に命令を出していますから。
逆に幅、高さを指定しますと、タグを書いたところに、画像が表示されてしまいます。

また、タグを貼りつけるところは、編集ページの一番上の方がいいと思います。
下の方ですと、読み込みに多少時間が掛かってしまいますから。

【では次に、画像を固定してみましょう。】

ブラウザをスクロールすると、通常はページの内容とともに壁紙もスクロールしますが、
この壁紙を動かないように固定する事が出来ます。
まるで映画のスタッフロールのようにページの中身だけがスクロールされ、
ダイナミックな印象を与える事が出来ます。

画像を固定しますと、スクロールしても背景画像はそのままです。
風景画の背景とか、写真の背景に有効です。
私のトップページは、背景を固定しております。

背景を固定するには、通常、先にも述べましたが、＜BODY＞タグの中で属性を指定します。
＜BODY＞タグの中に、

style="background-image:url(背景画像のＵＲＬ);background-attachment:fixed;"

このタグを入れますと、そのページの背景が固定できます。
このように

＜BODY style="background-image:url(背景画像のＵＲＬ);background-attachment:fixed;"＞

でも楽天では、それが出来ません。

楽天で壁紙を固定するタグを書いてみましょう。

このようになります。背景を出す、タグの後に、

;body.style.backgroundAttachment="fixed"

のタグを追加しました。
どうですか！みなさんもやってみてください。

このほかに、背景画像をリピートさせないタグ、上に一行しか表示しない属性のタグ、
左に一列しか表示しない属性のタグ、と色々ありますが、
それはまた、時期をみてやってみましょう。

ここぞというページは、背景を変えて、ページのセンスアップに挑戦してみてください。
しかし、背景が主体みたいなページにはしないように注意しましょうね。
あくまでも、テキストが主体です。

ではでは！【ＨＰの飾りつけ】みなさんがんばってください。（*^_^*）

【飾りつけ教室　ＭＥＮＵ】にもどる。